<template>
    <div class="livedetail">
        <el-card class="box-card">
            <el-input class="w200" v-model="phoneNum" placeholder="根据商品名称搜索"></el-input>
            <el-input class="w200" v-model="proName" placeholder="根据名称搜索"></el-input>
            <el-select v-model="selectValue" placeholder="收支类型">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
            <el-button class="w100" type="primary" @click="clear">清空</el-button>
            <el-button class="w100" type="primary">搜索</el-button>

            <el-table :data="tableData" style="width: 100%" border stripe>
                <el-table-column prop="serial" label="序号"> </el-table-column>
                <el-table-column prop="mobile" label="手机号"> </el-table-column>
                <el-table-column prop="nickName" label="昵称"> </el-table-column>
                <el-table-column prop="accountType" label="账户类型"> </el-table-column>
                <el-table-column prop="fundType" label="收支类型"> </el-table-column>
                <el-table-column prop="payBalance" label="交易金额"> </el-table-column>
                <el-table-column prop="before" label="交易前金额"> </el-table-column>
                <el-table-column prop="after" label="交易后金额"> </el-table-column>
                <el-table-column prop="remake" label="说明"> </el-table-column>
                <el-table-column prop="time" label="交易时间"> </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.pagenum"
                :page-sizes="[20, 30, 40, 50]"
                :page-size="query.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import { getLiveDetail } from '@/api/finace.js'
export default {
  name: 'livedetail',
  data () {
    return {
      selectValue: '',
      phoneNum: '',
      proName: '',
      tableData: [],
      total: 0,
      query: {
        pagesize: 20,
        pagenum: 1
      },
      options: []
    }
  },
  created () {
    this.getLiveDetail()
  },
  mounted () {

  },
  methods: {
    async getLiveDetail () {
      const { Data } = await getLiveDetail({
        pageSize: this.query.pagesize,
        pageIndex: this.query.pagenum,
        beginTime: null,
        endTime: null
      })
      this.total = Data.paging.totalItemCount
      this.options = Data.fundDrop
      // console.log(typeof this.query.pagesize, typeof this.query.pagenum);
      console.log(Data)
    },

    // 清除搜索关键字
    clear () {
      this.selectValue = ''
      this.phoneNum = ''
      this.proName = ''
    },

    // 监听页面条数发生变化
    handleSizeChange (newPageSize) {
      this.query.pagesize = newPageSize
      this.getLiveDetail()
    },

    // 监听页面页数发生变化
    handleCurrentChange (newPageNum) {
      this.query.pagenum = newPageNum
      this.getLiveDetail()
    }
  }
}
</script>

<style scoped>
.w200 {
    width: 200px;
    margin-right: 10px;
}
.w100 {
    width: 100px;
}
.el-table {
    margin-top: 10px;
}
.el-select {
    margin-right: 10px;
}
</style>
